<template>
  <div class="home" style="padding: 10px" ref="homeBoxRef">
    <div class="record-box" ref="recordBoxRef">
      <div class="left">
        <a-row class="filter-box" :gutter="12">
          <a-col :span="5">
            <a-select
                v-model:value="filterState.type"
                :options="recordsTab"
                style="width: 100%"
                @select="getRecordList(true)"
            />
          </a-col>
          <a-col :span="5">
            <a-select
                v-model:value="filterState.status"
                :options="statusList"
                style="width: 100%"
                @select="getRecordList(true)"
            />
          </a-col>
          <a-col :span="5">
            <a-select
                placeholder="所有审批"
                style="width: 100%"
                v-model:value="filterState.approval_id"
                mode="multiple"
                @change="getRecordList(true)"
            >
              <a-select-opt-group
                  v-for="cat of approvalList"
                  :key="cat.id"
                  :label="cat.cat_name"
              >
                <a-select-option
                    v-for="approve of cat.approval_list"
                    :key="approve.id"
                    :value="approve.id"
                >
                  {{ approve.name }}
                </a-select-option>
              </a-select-opt-group>
            </a-select>
          </a-col>
          <a-col :span="9">
            <a-range-picker
                v-model:value="rangeDate"
                :ranges="ranges"
                @change="handleRangePickerChange"
            />
          </a-col>
        </a-row>
        <div class="content beauty-scroller-bar">
          <div v-if="noRecord" class="mt-20">
            <a-empty description="暂无记录" />
          </div>
          <div
              v-for="item of recordList"
              :key="item.arrKey"
              class="mt-20 record-item"
          >
            <a-card
                size="small"
                :class="{ active: item.id == currentRecordId }"
                @click="checkRecordDetail(item)"
            >
              <template #title>
                    <span class="text-black bold">{{
                        item.approval_name
                      }}</span>
              </template>
              <template #extra>
                <a-tag :color="colorList[item.status]">
                  {{ item.status_txt }}
                </a-tag>
              </template>
              <a-row :gutter="[0, 12]">
                <a-col
                    :span="24"
                    v-for="(formItem, formItemIndex) of item.form"
                    :key="formItemIndex"
                    class="no-wrap"
                >
                  <span class="title">{{ formItem.title }}：</span>
                  <span>{{ formItem.content || "--" }}</span>
                </a-col>
                <a-col :span="24">
                  <div class="flex between align-middle user">
                    <div class="flex flex-1   align-middle user" >
                      <a-avatar
                          :src="item.avatar"
                          style="color: #fff; background-color: #2681f3;margin-right: 10px"
                          :size="24"
                      >
                        <template #icon><UserOutlined /></template>
                      </a-avatar>
                      <span class="flex-1 "  >{{ item.user_name }}</span>
                    </div>
                    <span>{{ item.created_at }}</span>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </div>
        </div>
        <a-row class="pagination-box">
          <a-pagination
              size="small"
              :total="recordTotal"
              :show-total="(total) => `共 ${total} 条`"
              :pageSize="filterState.pageSize"
              v-model:current="filterState.page"
              @change="handlePagerChange"
          />
        </a-row>
      </div>
      <div class="right">
        <detail-show
            :id="currentRecordId"
            @finish="handleApprovalItemFinish"
        />
      </div>
    </div>

  </div>
</template>

<script>
import {
  defineComponent,
  onActivated,
  reactive,
  toRaw,
  toRefs,
  ref,
  nextTick,
} from "vue";
import { UserOutlined } from "@ant-design/icons-vue";
import request from "../../../common/utils/request";
import { useRouter } from "vue-router";
import DetailShow from "../ApprovalDetail/modules/DetailShow.vue";
import moment from "moment";
import approval from "../../../store/modules/approval";
import { Modal } from "ant-design-vue";

const dateFormatStr = "YYYY-MM-DD";
const ranges = {
  今天: [moment(), moment()],
  本周: [moment().startOf("week"), moment().endOf("week")],
  本月: [moment().startOf("month"), moment().endOf("month")],
  本年: [moment().startOf("year"), moment().endOf("year")],
};

const recordsTab = [
  { value: "todo", label: "待审批" },
  { value: "complete", label: "已审批" },
  { value: "cc", label: "抄送我" },
  { value: "start", label: "已发起" },
];
const statusList = [
  { value: -1, label: "所有状态" },
  { value: 0, label: "审批中" },
  { value: 1, label: "已通过" },
  { value: 2, label: "已拒绝" },
  { value: 4, label: "已撤销" },
];

const colorList = {
  0: "blue",
  1: "green",
  2: "red",
  4: "gray",
};

export default defineComponent({
  name: "dataCenter",
  components: {  UserOutlined, DetailShow },
  setup() {
    const router = useRouter();
    const state = reactive({
      recordTotal: 0,
      recordList: [],
      noRecord: false,
      currentRecordId: 0,
      rangeDate: [],
      approvalList:[],
    });

    /** 审批中心 */

    const filterState = reactive({
      type: "todo",
      status: -1,
      approval_id:undefined,
      page: 1,
      pageSize: 10,
      rangeDate: [],
    });

    const checkRecordDetail = (current) => {
      if (state.currentRecordId == current.id) {
        return;
      }
      state.currentRecordId = current.id;
    };

    const handleApprovalItemFinish = () => {
      if (filterState.type == "todo") {
        getRecordList(true);
      }
    };

    const handlePagerChange = (page,pageSize) => {
      filterState.page = page;
      filterState.pageSize = pageSize;
      getRecordList();
    };

    const handleRangePickerChange = (date, dateStr) => {
      filterState.rangeDate = dateStr;
      getRecordList(true);
    };

    const getRecordList = (init = false) => {
      const params = {
        ...filterState,
      };
      if (init) {
        params.page = 1;
      }
      if (params.rangeDate[0] && params.rangeDate[1]) {
        params.createDay = "diy";
        params.start_day = params.rangeDate[0];
        params.end_day = params.rangeDate[1];
      }
      delete params.rangeDate;
      state.recordList = [];
      request
          .post("/work_approval", "/staff/approval/form/dataCenter", params)
          .then((res) => {
            state.recordList = res.list;
            state.recordTotal = res.total;
            state.noRecord = res.total === 0;
            if (init) {
              state.currentRecordId = state.noRecord ? 0 : state.recordList[0].id;
            }
          });
    };

    const startApproval = (approval) => {
      if (approval.process.length == 0) {
        Modal.info({
          title: "提示",
          content: () => "请管理员前往管理后台初始化该审批，并完善审批流程",
          centered: true,
        });
        return;
      }
      router.push({
        name: "StartApproval",
        query: { id: approval.id },
      });
    };



    const getApprovalList = () => {
      request
          .get("/work_approval", "/manage/category", {
            withApproval: 1,
          })
          .then((res) => {
            state.approvalList = res.list;
          });
    };

    const homeBoxRef = ref(null);
    const recordBoxRef = ref(null);

    const init = () => {
      getApprovalList();
      getRecordList(true);
    };

    init();

    return {
      recordsTab,
      colorList,
      statusList,
      filterState,
      dateFormatStr,
      ranges,
      ...toRefs(state),
      startApproval,
      checkRecordDetail,
      getRecordList,
      handleApprovalItemFinish,
      handlePagerChange,
      handleRangePickerChange,

      homeBoxRef,
      recordBoxRef,
    };
  },
});
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  // background: #fff;
  // min-height: 100%;
  .record-box {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    .left {
      width: 660px;
      height: 100%;
      margin-right: 20px;
      position: relative;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;

      // padding-right: 20px;
      // border-right: 1px solid #f1f1f1;
      .filter-box,
      .pagination-box {
        position: absolute;
        left: 1px;
        right: 1px;
        background: #fff;
        z-index: 1;
        display: flex;
        align-items: center;
        padding: 0 8px;

        // padding-right: 8px;
        // border: 1px solid #ddd;
      }
      .filter-box {
        top: 0;
        border-bottom: 1px solid #ddd;
        height: 50px;
        line-height: 50px;
      }
      .pagination-box {
        height: 40px;
        bottom: 0;
        border-top: 1px solid #ddd;
        text-align: right;
        justify-content: flex-end;
      }
      .content {
        padding: 50px 0;
        height: 100%;
        overflow: hidden auto;
        // background: #fefefe;
        .record-item {
          cursor: pointer;
          user-select: none;
          padding: 0 8px;
          // box-shadow: @box-shadow-base;

          .title {
            color: #666;
          }
          .user {
            font-size: 12px;
            color: #999;
          }
        }
        .active {
          border: 1px solid @primary-color;
          background: @primary-color-bg;
        }
      }
    }
    .right {
      flex: 1;
      height: 100%;
      position: relative;
      // box-shadow: @box-shadow-base;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      // margin-right: 20px;
    }
  }
}
:deep(.ant-tabs-nav) {
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 20px;
}
</style>
